<template>
  <div class="singer-detail">
    <music-list :bg-image="bgImage" :songs="songs" :title="title"/>
  </div>
</template>

<script type="text/ecmascript-6">
import MusicList from 'components/music-list/music-list'
import { mapGetters } from 'vuex'
import { getSingerDetail } from 'api/singer'
import { ERR_OK } from 'api/config'
// import { getSongVkey } from 'api/song'
// import { createSong } from 'common/js/song'
import { createSong, isValidMusic, processSongsUrl } from 'common/js/song'
export default {
  data () {
    return {
      songs: []
    }
  },
  created () {
    this._getSingerDetail()
  },
  computed: {
    bgImage () {
      return this.singer.avatar
    },
    title () {
      return this.singer.name
    },
    ...mapGetters(['singer'])
  },
  methods: {
    _getSingerDetail () {
      // 如果没有歌手的id就返回
      if (!this.singer.id) {
        this.$router.push({ name: 'Singer' })
        return false
      }
      getSingerDetail(this.singer.id)
        .then((result) => {
          console.log(result)
          if (result.code === ERR_OK) {
            processSongsUrl(this._normalizeSongs(result.data.list))
              .then((response) => {
                this.songs = response
              })
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    _normalizeSongs (list) {
      const newArray = []
      list.forEach((item, index) => {
        const { musicData } = item
        if (musicData.songid && musicData.albummid) {
          if (isValidMusic(musicData)) {
            newArray.push(createSong(musicData))
          }
          // getSongVkey(musicData.songmid)
          //   .then((result) => {
          //     // console.log(result)
          //     if (result.code === ERR_OK) {
          //       newArray.push(createSong(musicData, result.data.items[0].vkey))
          //     }
          //   })
          //   .catch((error) => {
          //     console.log(error)
          //   })
        }
      })

      return newArray
    }
  },
  components: { MusicList }
}
</script>

<style lang="stylus" scoped rel="stylesheet/stylus">
@import '~common/stylus/variable';
  .singer-detail
    position fixed;
    z-index 100;
    top 0;
    bottom 0;
    left 0;
    right 0;
    background-color $color-background;
</style>
